<template>
  <i 
    :class="iconClass" 
    :style="iconStyle"
    @click="handleClick"
    :title="title"
  ></i>
</template>

<script setup>
import { computed } from 'vue';

// 定义组件属性
const props = defineProps({
  // 图标名称，支持两种格式：
  // 1. 完整类名：'icon-equipment-xiaofang'
  // 2. 简化名称：'equipment-xiaofang' (会自动添加icon-前缀)
  name: {
    type: String,
    required: true
  },
  // 图标大小
  size: {
    type: [String, Number],
    default: '16px'
  },
  // 图标颜色
  color: {
    type: String,
    default: 'currentColor'
  },
  // 图标标题提示
  title: {
    type: String,
    default: ''
  },
  // 是否可点击
  clickable: {
    type: Boolean,
    default: false
  },
  // 自定义样式
  customStyle: {
    type: Object,
    default: () => ({})
  }
});

// 定义事件
const emit = defineEmits(['click']);

// 计算图标类名
const iconClass = computed(() => {
  let iconName = props.name;
  // 如果没有icon-前缀，自动添加
  if (!iconName.startsWith('icon-')) {
    iconName = `icon-${iconName}`;
  }
  return iconName;
});

// 计算图标样式
const iconStyle = computed(() => {
  const baseStyle = {
    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,
    color: props.color,
    cursor: props.clickable ? 'pointer' : 'default',
    display: 'inline-block',
    verticalAlign: 'middle',
    ...props.customStyle
  };
  
  return baseStyle;
});

// 点击事件处理
const handleClick = (event) => {
  if (props.clickable) {
    emit('click', event);
  }
};
</script>

<style scoped>
/* 阿里图库基础样式 */
[class^="icon-"] {
  font-family: "iconfont" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 图标悬停效果 */
[class^="icon-"]:hover {
  transition: all 0.3s ease;
}

/* 可点击图标的悬停效果 */
[class^="icon-"][style*="cursor: pointer"]:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

/* 响应式图标 */
@media (max-width: 768px) {
  [class^="icon-"] {
    font-size: 14px !important;
  }
}
</style>
